<template>
  <div class="header">
    <div class="title">玉树CIM智慧校园平台</div>
    <div class="self_center">
      <el-dropdown :hide-on-click="false">
        <span class="el-dropdown-link">
          <img src="@/assets/img/logo.png" alt="" /> 超级管理员
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="out">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    out() {
      this.$store
        .dispatch("user/resetToken")
        .then(() => {
          this.$router.push({
            path: "/login",
          });
        })
        .catch((error) => alert(error));
    },
  },
};
</script>

<style lang = "scss" scoped>
.header {
  .title {
    float: left;
    font-family: "Arial Negreta", "Arial Normal", "Arial";
    font-weight: 700;
    font-style: normal;
    font-size: 25px;
    color: #027db4;
    line-height: 60px;
  }
  .self_center {
    float: right;
    img {
      height: 50px;
      vertical-align: middle;
    }
  }
}
</style>